<div class="layui-card">
    <div class="layui-card-body" style="border-bottom: 1px solid #f6f6f6;">
        <div class="layui-row">
            <div class="layui-btn-group larry-group">
                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="javascript:layer.open({title:'增加',type:2,area: ['40%', '40%'],content:'<?=url('articlerec/add')?>'});">
                    <i class="layui-icon">&#xe654;</i>
                    <cite>增加</cite>
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger ajaxPost" url="<?=url('articlerec/delall') ?>">
                    <i class="layui-icon">&#xe654;</i>
                    <cite>删除</cite>
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-form" id="form">
            <div class="layui-col-lg2">
                <input type="text" name="keyword" placeholder="请输入关键词" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-lg1">
                <button class="layui-btn layui-btn-normal" onclick="search()">搜索</button>
            </div>
        </div>
        <div class="layui-row">
            <table class="layui-hide" lay-filter="table" id="table"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table', 'form', 'larry'], function() {
    var form = layui.form;
    var table = layui.table;
    var $ = layui.$;
    var larry = layui.larry;
    form.render('select');
    search = function() {
        var url = "/articlerec/lists";
        var data = $("#form").find("[name]");
        var where = {};
        data.each(function(i, e) {
            where[$(e).attr('name')] = $(e).val();
        });
        table.render({
            elem: '#table',
            url: url,
            where: where,
            method: 'post',
            cellMinWidth: 180,
            page: true,
            cols: [
                [
                    { type: 'checkbox' },
                    { field: 'id', title: 'ID', width: 80, sort: true, title: 'ID' }, 
                    { field: 'title', title: '标题' }, 
                    { field: 'sort', title: '排序', edit: 'text' }, 
                    { field: 'create_time', title: '时间' }, 
                    { field: 'action', title: '操作', width: 178, align: 'right', toolbar: '#barDemo', fixed: "right", }
                ]
            ]
        });
    };
    search();
    //监听工具条
    table.on('tool(table)', function(obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            layer.open({
                title: '查看',
                type: 2,
                area: ['100%', '100%'],
                content: '/articlerec/detail/id/' + data.id
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '编辑',
                type: 2,
                area: ['40%', '40%'],
                content: '/articlerec/edit?id='+data.id
            });
        } else if (obj.event === 'del') {
            layer.confirm('确认要删除吗?', function(index) {
                $.ajax({
                    url: "/articlerec/del",
                    method: "post",
                    dataType: "json",
                    data: { id: data.id },
                    success: function(res) {
                        my.action(res);
                        layer.close(index);
                    }
                });
            });
        }
    });
    //监听编辑框
    table.on('edit(table)', function(obj) {
        var data = {};
        data['table'] = 'article_rec';
        data['id'] = obj.data.id;
        data['field'] = obj.field;
        data['value'] = obj.value;
        $.ajax({
            url: '/com/edit',
            method: 'post',
            dataType: 'json',
            data: data,
            success: function(res) {
                my.action(res);
            }
        });
    });
});
</script>